<template>
  <div class="main">
    <div class="divWarehouseAdd">
      <el-form :model="from" :rules="Fromrules" ref="From">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="仓库编码" prop="code">
              <el-input placeholder="请输入内容" v-model="from.code"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="仓库名称" prop="name">
              <el-input placeholder="请输入内容" v-model="from.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="仓库类型" prop="type">
              <el-select
                v-model="from.type"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="20">
            <el-form-item label="省市区" prop="location">
              <el-cascader
                :options="location"
                style="width: 100%"
                v-model="seloption"
                @change="handlechabge"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item> </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="16">
            <el-form-item label="详细地址" prop="address">
              <el-input
                placeholder="请输入内容"
                v-model="from.address"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="仓库状态" prop="status">
              <el-radio-group v-model="from.status" style="width: 100%">
                <el-radio :label="1">启用</el-radio>
                <el-radio :label="0">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="仓库面积" prop="area">
              <el-input
                placeholder="请输入内容"
                v-model="from.surface"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="负责人" prop="personName">
              <el-input
                placeholder="请输入内容"
                v-model="from.personName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系电话" prop="phone">
              <el-input
                placeholder="请输入内容"
                v-model="from.phone"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <div class="button">
          <button class="fanhui">返回</button>
          <button class="submit" @click="submit">提交</button>
        </div>
      </el-form>
    </div>
    <!-- <p>{{ $route.params.id }}</p> -->
  </div>
</template>

<script>
import { regionData, CodeToText } from 'element-china-area-data'
import { addwarehouse, putwarehouse, updatehouse } from '@/api/warehouse'
export default {
  data () {
    return {
      options: [
        {
          value: 'ZZ',
          label: ' 中转仓'
        },
        {
          value: 'JG',
          label: '加工仓'
        },
        {
          value: 'CB',
          label: '储备仓'
        },
        {
          value: 'LC',
          label: '冷藏仓'
        }
      ],
      seloption: [],
      location: regionData,
      from: {
        personName: '',
        name: '', // 仓库名称
        status: '', // 状态
        type: '', // 类型
        area: '',
        city: '',
        province: '',
        surface: '', // 面积
        address: '',
        code: '',
        phone: '', // 电话
        location: ''
      },
      upform: {},
      frompage: {
        like_code: '',
        like_name: '',
        current: 1,
        size: '',
        descs: 'createTime'
      },
      Fromrules: {
        code: [{ required: true, message: '不能为空' }],
        name: [{ required: true, message: '不能为空' }],
        type: [{ required: true, message: '不能为空' }],
        location: [{ required: true, message: '不能为空' }],
        phone: [
          { required: true, message: '不能为空' },
          {
            pattern:
              /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/,
            message: '手机号码格式不对，请重新输入',
            trigger: 'blur'
          }
        ],
        address: [{ required: true, message: '不能为空' }],
        personName: [{ required: true, message: '不能为空' }],
        area: [{ required: true, message: '不能为空' }],
        status: [{ required: true, message: '不能为空' }]
      }
    }
  },
  async created () {
    if (this.$route.params.id !== 'null') {
      const { data } = await updatehouse(this.$route.params.id)
      console.log(data)
      this.from = data
      this.seloption = [data.province, data.city, data.area
      ]
    }
  },
  methods: {
    // 省市区
    handlechabge (val) {
      // console.log(val)
      this.seloptions = val
      // console.log(this.seloptions)
      const cityNames = []
      this.seloptions.forEach((item) => cityNames.push(CodeToText[item])) // 将省市区三个拼接一起
      this.from.location = cityNames.join('/') // 把师数组里面的拼接字符串
      console.log(this.from.location)
      this.from.province = val[0]
      this.from.city = val[1]
      this.from.area = val[2]
    },
    // 添加
    async submit () {
      this.$refs.From.validate(async valid => {
        if (valid) {
          if (this.$route.params.id === 'null') {
            // alert(1)
            await addwarehouse(this.from)
            this.$message.success('添加成功')
          } else {
            // alert(2)
            await putwarehouse(this.from)
            this.$message.success('编辑成功')
          }
          this.$router.push('/warehouse')
        } else {
          this.$message.warning('请填写完整')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.button {
  text-align: center;
}
.button :hover {
  background-color: #ffb200;
}
.submit {
  background: #ffb200;
  color: #332929;
  height: 40px;
  border-radius: 20px;
  border: 0;
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  text-align: center;
  line-height: 40px;
  padding-left: 26px;
  padding-right: 26px;
  cursor: pointer;
  outline: 0;
  width: 170px;
  margin: 0 15px;
}
.fanhui {
  background: #f8f5f5;
  color: #332929;
  height: 40px;
  border-radius: 20px;
  border: 0;
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  text-align: center;
  line-height: 40px;
  padding-left: 26px;
  padding-right: 26px;
  cursor: pointer;
  outline: 0;
  width: 170px;
  margin: 0 15px;
}
.divWarehouseAdd {
  height: 509px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
  margin-top: 20px;
  margin-left: 29px;
  margin-right: 29px;
  padding-top: 31px;
}
.main {
  background-color: #fdfafa;
  width: 100%;
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 84px);
}
/deep/ .el-row {
  position: relative;
  box-sizing: border-box;
  margin-left: -15px;
  margin-right: -15px;
}
/deep/ .el-col {
  padding-left: 15px;
  padding-right: 15px;
  width: 33.3333333333%;
}
/deep/.el-input .el-input__inner {
  background: #f8f5f5;
  border-color: #f8f5f5;
  color: #b5abab;
}
/deep/.el-input .el-input__inner:focus {
  border: 1px solid yellowgreen;
}
/deep/.el-input .el-input__inner:hover {
  border: 1px solid black;
}
.el-form {
  margin-left: 10px;
  margin-right: 10px;
}
/deep/ .el-input__inner {
  width: 100%;
}
/deep/.el-input .el-input__inner:focus {
  border: 1px solid yellowgreen;
}
</style>
